<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <!-- Favicon icon -->
  <link rel="icon" id="icons" type="image/png" sizes="16x16" href="../assets/images/favicon.ico">
  <title></title>
  <!-- Bootstrap Core CSS -->
  <link href="./css/bootstrap.min.css" rel="stylesheet">
  <!-- Custom CSS -->
  <link href="css/style.min.css" rel="stylesheet">
  <!-- Dashboard 1 Page CSS -->
  <link href="css/colors/default.css" id="theme" rel="stylesheet">
  <link rel="stylesheet" href="css/diy.min.css">
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body class="w100p h100p">
  <div id="root" class="wx_login w100p h100p" v-clock>
    <div class="p-t-36 p-l-39 p-r-43 disflex jsbet borderbox">
      <div class="disflex align-cen lh12">
        <img :src="logo" alt="" :class="[miaoJang ? 'w30 h30' : 'w30 h24']">
        <span class="fs18 cblue p-l-13 fbold">{{loginTitle}}</span>
      </div>
      <div class="fs18 ce4 fbold" v-if="projectPhone != ''">服务电话 {{projectPhone}}</div>
    </div>
    <div class="bgfff textc w400 h530 p-t-50 borderbox braduis10 position-fixed left0 right0 bottom0 top0 mauto shadow-gray">
      <div class="tabs-title">
        <span class="fs18 cdeepblue p-b-13 " @click="loginType=1" :class="{'bbblue_2': loginType==1, 'm-r-40': !miaoJang}">
          账号登录
        </span>
        <span class="fs18 cdeepblue p-b-13" @click="loginType=2" :class="{'bbblue_2': loginType==2}" v-if="!miaoJang">
          微信扫码
        </span>
      </div>
      <div class="tabs-content m-t-30">
        <div class=" m-b-15 position-relative" v-if="loginType==1">
          <div class="m-t-40 w-75 mauto">
            <input type="text" v-model="phone" @input="getCompany" class="form-control phgray" placeholder="请输入手机号">
          </div>
          <div class="m-t-30 w-75 mauto">
            <select class="form-control" v-model="company" placeholder="请选择公司">
              <option class="c78 hide" value="" disabled selected>请选择公司</option>
              <option v-for="item in companyList" :key="item.companyId" :value="item.companyId">
                {{item.companyName}}
              </option>
            </select>
          </div>
          <div class="m-t-30 w-75 mauto disflex">
            <div>
              <input type="text" v-model="code" class="form-control phgray" placeholder="请输入验证码">
            </div>
            <div class="m-l-10" style="flex: 0 0 120px;">
              <button class="btn btn-success w100p " :class="{'disabled': countDown}" @click="getVeriCode">
                {{countDown ? `重新发送(${countDown})`: '获取验证码'}}
              </button>
            </div>
          </div>
          <div class="m-t-30 w-75 mauto">
            <button class="btn btn-success w100p" @click="login">登录</button>
          </div>
        </div>
        <div class="disflex jscen m-b-15 position-relative" v-if="loginType==2">
          <iframe :src="codeUrl" class="w300 h400" scrolling="no" frameborder="0">
          </iframe>
        </div>
      </div>
    </div>
   <div class="textc cblue fs14 position-fixed left0 right0 mauto  bottom29">
      <img :src="logBottomImg" alt="" class="h15">
    </div>
  </div>
  <script src="js/jquery.min.js"></script>
  <script src="js/layer/layer.js"></script>
  <script src="js/vue.js"></script>
  <script src="js/config.js"></script>
  <script src="./js/config.js"></script><script src="./js/extend.js"></script>
  <script>
  $(function() {
    window.vw = new Vue({
      el: '#root',
      mixins:[configInfo],
      name: 'login',
      data: {
        loginType: 1,
        codeUrl: '',
        phone: '',
        company: '',
        code: '',
        timer: null,
        countDown: 0,
        companyList: [],
        phone: '',
        logo: '',
        enterpriseName: '',
        isYili: '',
        miaoJang: false,
        projectPhone:'',
        loginTitle:'',
        logBottomImg:'',
        oemLogin:[
          {
            id: "1",
            tag:'miaoJang',
            href:'../assets/images/miaojiang/favicon.ico',
            title:'印象苗疆 智能AI运营系统',
            projectPhone :"17721872191",
            logBottomImg:"./../assets/images/footerLogo.png",
            logo:'./../assets/images/logo2.png'
          },
          {
            id: "2",
            tag:'shiji',
            href:'../assets/images/favicon.ico',
            title:'始计科技（深圳)有限公司',
            projectPhone :"13311786558",
            logBottomImg:"",
            logo:'./../assets/images/diy/yimai.png'
          },
          {
            id: "3",
            tag:'jiashuo',
            href:'../assets/images/jiashuo/favicon.ico',
            title:'佳说云名片',
            projectPhone :"",
            logBottomImg:"./../assets/images/jiashuo/footerLogo.jpg",
            logo:'./../assets/images/jiashuo/logo.png'
          }
        ]
      },
      created() {
        // http://crm.youdomain.com/main/wx_login.html?id=1   oem 示例访问地址
        let param = $.formatParams(location.href);
        localStorage.setItem('company_key', param.company_key || '');
        const oem = this.oemLogin.find(oe =>( oe.id === param.id && param.id));
        if(oem){
          let el = document.getElementById('icons')
          el.href = oem.href;
          document.title = oem.title;
          this.loginTitle = oem.title;
          this.logo = oem.logo;
          this.projectPhone = oem.projectPhone
          this.logBottomImg = oem.logBottomImg;
          this.miaoJang = true;
        }else{
          document.title = "壹脉智能CRM";
          this.loginTitle = document.title;
          this.logo = "./../assets/images/diy/yimai.png";
          this.logBottomImg = "./../assets/images/diy/text.png";
          this.projectPhone = "17721872191";

        }
      },
      mounted() {
        this.getCodeUrl();
      },
      methods: {
        getCodeUrl() {

          $.cAjax('/crmPc/home/getPcLoginImg', {
            success: (res) => {
              if (res.code == 200) {
                this.codeUrl = res.data;
              }
            }
          });
        },
        getCompany() {
          if (!$.checkPhone(this.phone)) {
            return;
          }

          $.cAjax('/crmPc/home/getCompanyListByPhone', {
            data: {
              phone: this.phone,
            }
          }).then(res => {
            this.companyList = res;
          })
        },
        getVeriCode() {
          if (this.countDown) return;
          if (!$.checkPhone(this.phone)) {
            layer.alert('请输入正确的手机号！');
            return;
          }

          $.cAjax('/crmPc/home/sendSms', {
            data: {
              phone: this.phone,
              type: 1,
            }
          }).then(res => {
            this.countDown = 60;

            this.timer = setInterval(() => {
              this.countDown--;
              if (this.countDown === 0) {
                clearInterval(this.timer);
              }
            }, 1 * 1000);
          })
        },
        login() {
          $.cAjax('/crmPc/home/crmPcLoginBySms', {
            data: {
              phone: this.phone,
              companyId: this.company,
              smsCode: this.code,
            },
          }).then(data => {
            localStorage.setItem('info', JSON.stringify(data));
            localStorage.setItem('token', data.token);
            location.href = location.origin + "/index.html";
          })
        },
      }
    });

  })
  </script>
</body>

</html>
